<template>
  <van-calendar
    v-model:show="show"
    :poppable="poppable" :show-confirm="false" :style="{'height': poppable ? '700rpx' : '480rpx'}"
    :position="position"
    :min-date="minDate"
    :max-date="maxDate"
    switch-mode="month"
    :formatter="formatter"
    :show-title="showTitle"
    :show-mark="false"
    row-height="30"
    @select="onSelect"
  />
</template>
<script setup>
  import dayjs from 'dayjs';
  import { ref } from 'vue';
  import store from '@/store'

  const props = defineProps({
    poppable: Boolean,
    position: 'bottom',
    showTitle: Boolean,
    active: 0,
    dateList: Array,
    line: Object,
  })
  const emit = defineEmits(['getList']);

  const show = defineModel();

  const minDate = ref(new Date('2000-01-01'));
  const maxDate = ref(new Date())


  const onSelect = (date) => {
    const paramDate = dayjs(date).format('YYYY-MM-DD');
    if (props.active === 0) {
      emit('getList', paramDate)
    } else if (props.active === 1) {
      // 保存线路详情
      store.dispatch('setPatrolLineDetail', props.line);
      uni.navigateTo({ url: `/pages/patrolInspect/record?id=${props.line.lineId}&date=${paramDate}` })
    }
  };

  // 日历样式自定义
  const formatter = (day) => {
    const dayTime = dayjs(day.date).format('YYYY-MM-DD');
    const hasHighlight = props.dateList.indexOf(dayTime);
    if (hasHighlight !== -1) {
      day.className = 'calendar-highlight'
    }
    return day;
  };
  </script>